<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="csrf-param" content="_homeCSRF">
    <meta name="csrf-token" content="RkJLbXljbG93b3M5JjsZG3MsCidNDg4lISl9DApUKBwCcBgnQCoEXw==">
    <title>社会责任</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../src/img/favicon.ico" rel="shortcut icon">
    <link href="/images/favicon.ico" rel="bookmark">
    <link href="../src/css/jquery.bxslider.css" rel="stylesheet">
    <link href="../src/iconfonts/iconfont.css" rel="stylesheet">
    <link href="../src/css/bootstrap.css" rel="stylesheet">
    <link href="../src/css/dookayui.css" rel="stylesheet">
    <link href="../src/css/dx.css" rel="stylesheet">
    <link href="../src/css/dy.css" rel="stylesheet">
    <!--[if lte IE9]>
    <script src="../src/js/html5shiv.js"></script>
    <![endif]-->
    <!--[if lte IE9]>
    <script src="../src/js/respond.min.js"></script>
    <![endif]-->

    <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->


    <link rel="stylesheet" href="../src/css/swiper-4.2.2.min.css">
    <link rel="stylesheet" href="../src/css/special-reset.css">
    <script src="../src/js/jquery-2.1.4.js"></script>
    <script src="../src/js/swiper-4.2.2.min.js"></script>


</head>
<body class="bg-gray">
<div class="header"></div>

<!-- Swiper -->
<div class="swiper-wrap container" style="box-sizing: border-box">

    <h2>慈善大事记</h2>

    <!-- Swiper -->
    <div class="swiper-container swiper-container-horizontal " >
        <div class="swiper-wrapper panel-charity">

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span>
            <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
            <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
            <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
            <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span>
            <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span>
        </div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>

</div>

<footer class="footer"></footer>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView:3,
        spaceBetween: 10,
        observer:true,
        observeParents:true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        autoplay: {
            stopOnLastSlide: true,
        },
        breakpoints: {
            1024: {
                slidesPerView: 4,
                spaceBetween: 40,
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 30,
            },
            640: {
                slidesPerView: 1,
                spaceBetween: 20,
            },
            320: {
                slidesPerView: 1,
                spaceBetween: 10,
            }
        }
    });
</script>

<script>

    $(document).ready(function () {

        $(".header").load("http://192.168.100.181:8080/huoge-edu/public-file/social-header.html", function () {
            $(".px-mobile .dy-nav .bread").on("click", function () {
                $(".px-mobile .main-nav").slideToggle("slow");
            });
        });
        $(".footer").load("http://192.168.100.181:8080/huoge-edu/public-file/footer.html");

        getAllpanel();



    });

    //获取所有panel
    function getAllpanel() {

        var panelLists;
        var panelListsLength;

        $.ajax({
            url: "http://192.168.100.181:8080/api/article/queryArticleByColumn?id=80",
            success: function (data) {

                console.log(data)

                panelLists=data.data;
                panelListsLength=panelLists.length;

                for (var i = 0; i < panelListsLength; i++) {
                    $('.panel-charity').append(`
                        <div class="swiper-slide">
                        <img class="img" src=${panelLists[i].coverImageUrl} alt="" style="width: 100%;height: 220px;">
                        <div class="text">
                            <span class="date">${panelLists[i].createDate}</span>
                            <span class="word">
                                <span>
                                    ${panelLists[i].summary}
                                </span>
                            </span>
                        </div>
                    </div>
                          `);
                }
            }});

    }

    //默认回到第一个
    setTimeout(function () {
        document.getElementsByClassName("swiper-wrapper")[0].style.transform = "translate3d(0px, 0px, 0px)";
        $(".swiper-pagination-bullet").removeClass("swiper-pagination-bullet-active");
        $(".swiper-pagination-bullet:first").addClass("swiper-pagination-bullet-active");
    },100)



</script>
</body>
</html>